<template>
  <div
    class="home-banner"
    @click="onClick"
  >
    <div
      class="bg-img"
      :style="{backgroundImage: bgImage}"
    >
      <div class="title">{{title}}</div>
      <div class="sub-title">{{subTitle}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    img: {
      type: String,
      defalt: ''
    },
    title: {
      type: String,
      defalt: ''
    },
    subTitle: {
      type: String,
      defalt: ''
    }
  },
  computed: {
    bgImage () {
      return 'url(' + this.img + ')'
    }
  },
  methods: {
    // bannner单击事件
    onClick () {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.home-banner {
  margin: 24rpx 18rpx 0;
  .bg-img {
    border-radius: 30rpx;
    height: 250rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 38rpx;
      color: #fff;
    }
    .sub-title {
      margin-top: 30rpx;
      padding: 6rpx 25rpx;
      border-radius: 80rpx;
      border: 1rpx solid #fff;
      background-color: #446afb;
      font-size: 40rpx;
      color: #ddd;
    }
  }
}
</style>